import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
// import { store } from '../store/index';
import { create_collect_action_delet } from '../store/actionCreator'
import { connect } from 'react-redux'

class Collect extends Component {


    componentDidMount() {
        //监听store的改变(只要store发生改变，该回调函数一定会立即执行)
        //store.subscribe()的返回值是一个函数，用来取消监听
        // this.unsubscribe = store.subscribe(() => {
        //     this.setState({});//触发组件更新
        // })
    }

    // componentWillUnmount() {
    //     this.unsubscribe();//取消监听
    // }
    //取消收藏
    handelclick(item) {
        this.props.do_collect(item);
    }

    render() {
        return (
            <div className='collect'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>我的收藏</NavBar>
                </div>
                <main>
                    {
                        this.props.collectlist.map((item, index) => {
                            return (
                                <div className='bigbox' key={index}>
                                    <div className='oimg'>
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="otxt">
                                        <h6>{item.name}</h6>
                                        <div className='cost'>原价<p>￥{item.salesPrice.value}</p></div>
                                        <div className='quote'>
                                            <div className='activity'>活动价￥<p>{item.salesPrice.value}</p></div>
                                            <div className='delet' onClick={() => { this.handelclick(item) }}>取消收藏</div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </main>
            </div>
        );
    }
}

export default connect(
    (state) => { //将store中的数据注入到组件属性中（props）
        return {
            collectlist: state.collectlist
        }
    }, (dispatch) => {//将dispatch以防法的形式 注入到组件属性中（props）
        return {
            do_collect(params) {
                dispatch(create_collect_action_delet(params))//删除
            }
        }
    })(Collect);